<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home/wellcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card" style="margin-top:20px;">
      <div slot="header" class="clearfix">
        <span>
          <i class="el-icon-menu"></i> 操作面板
        </span>
        <!-- <el-button style="float: right; padding: 3px 0" type="text" icon="el-icon-edit">新增商家</el-button> -->
      </div>
      <!-- 关键字搜索框 -->
      <div class="demo-input-suffix">
        <el-input
          placeholder="请输入商家姓名"
          prefix-icon="el-icon-search"
          maxlength="20"
          show-word-limit
          style="width:200px;"
          size="small"
          v-model="searchForm.keywords"
          @keyup.enter.native="loadData"
        ></el-input>
        <el-button
          type="primary"
          icon="el-icon-search"
          style="margin-left:20px;"
          size="small"
          @click="loadData"
        >搜索</el-button>
      </div>
      <!-- 表格数据 -->
      <template>
        <el-table :data="tableData" stripe style="width: 100%;margin-top:20px;text-align:center;">
          <el-table-column prop="u_head_phone" label="用户头像" width="200">
            <template slot-scope="scope">
              <el-image :src="scope.row.u_head_phone" style="width:60px;height:60px" fit="full"></el-image>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="u_id" label="用户ID"></el-table-column> -->
          <el-table-column prop="u_name" label="用户姓名"></el-table-column>
          <el-table-column prop="u_email" label="用户邮箱"></el-table-column>
          <el-table-column prop="u_tel" label="用户手机号"></el-table-column>
          <el-table-column fixed="right" label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                @click="handleClick(scope.row,'delete')"
                type="danger"
                size="small"
                icon="el-icon-delete"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 分页组件 -->
      <div class="page-box" style="text-align:right;margin-top:20px;">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="pageSize"
          :pager-count="5"
          @current-change="currentChange"
          @prev-click="prevClick"
          @next-click="nextClick"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchForm: {
        keywords: "" // 搜索关键字
      },
      page: 1, // 当前页面，默认第一页
      pageSize: 4, // 每页显示条数
      total: 0, // 总条数
      tableData: []
    };
  },
  async mounted() {
    // 加载数据
    await this.loadData();
  },
  methods: {
    loadData() {
      // 校验搜索关键字
      let keywords = this.searchForm.keywords.trim();
      // 封装请求路径
      let url = `${this.$api.getPetUser}?page=${this.page}&&pageSize=${this.pageSize}`;
      if (keywords && keywords.length > 0) {
        url += `&&keywords=${keywords}`;
      }
      console.log("请求url：", url);
      // 请求后端服务器
      this.$http
        .get(url)
        .then(res => {
          console.log("后端响应数据：", res.data);
          if (res?.data?.code == 200) {
            this.page = res?.data?.data?.page;
            this.pageSize = res?.data?.data?.pageSize;
            this.total = res?.data?.data?.total;
            this.tableData = res?.data?.data?.result;
            console.log("=====", this.tableData);
          }
        })
        .catch(err => {
          this.$message.error(error);
        });
    },

    handleClick(row, status) {
      console.log(row);
      const { u_id } = row;
      switch (status) {
        case "update": // 修改
          break;
        case "delete": // 删除
          this.$confirm("是否确认删除这条用户信息?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(() => {
              // 删除实现
              this.$http.delete(`${this.$api.deleteUser}/${u_id}`).then(res => {
                // 删除成功
                if (res?.data?.code == 200) {
                  this.$message({ type: "success", message: res?.data?.msg });
                  // 删除成功，更新表格数据
                  this.loadData();
                } else {
                  // 删除失败
                  this.$message.error(res?.data?.msg);
                }
              });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消删除"
              });
            });
          break;
      }
    },
    currentChange(page) {
      console.log("currentChange：", page);
      this.page = page;
      this.loadData();
    },
    prevClick(e) {
      console.log("prevClick", e);
    },
    nextClick(e) {
      console.log("nextClick", e);
    }
  }
};
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
}
</style>